<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15.1-模板 DSL 的编译器</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 编译器其实只是一段程序，它用来将 “一种语言 A” 翻译成 “另外一种语言 B”​
         * - 语言 A 通常叫作源代码（source code）​，语言 B 通常叫作目标代码（object code 或 target code
         * - 将源代码翻译为目标代码的过程叫作编译（compile）​。
         * - 过程通常包含词法分析、语法分析、语义分析、中间代码生成、优化、目标代码生成等
         * 
         * 整个编译过程分为编译前端和编译后端
         * - 编译前端包含词法分析、语法分析和语义分析，它通常与目标平台无关，仅负责分析源代码
         * - 编译后端则通常与目标平台有关，编译后端涉及中间代码生成和优化以及目标代码生成
         * - 编译后端并不一定会包含中间代码生成和优化这两个环节，这取决于具体的场景和实现
         * - 中间代码生成和优化这两个环节有时也叫 “中端”​。
         * 
         *  Vue.js 模板编译器来说
         * - 源代码就是组件的模板，而目标代码是能够在浏览器平台上运行的 JavaScript 代码，
         *    或其他拥有 JavaScript 运行时的平台代码
         * 
         * Vue.js 模板编译器的目标代码其实就是渲染函数
         * - 首先对模板进行词法分析和语法分析，得到模板 AST
         * - 接着，将模板 AST 转换（transform）成 JavaScript AST
         * - 最后，根据 JavaScript AST 生成 JavaScript 代码，即渲染函数代码
         * 
         * AST 是 abstract syntax tree 的首字母缩写，即抽象语法树
         * - AST 其实就是一个具有层级结构的对象。模板 AST 具有与模板同构的嵌套结构
         * - 不同类型的节点是通过节点的 type 属性进行区分的
         * - 标签节点的子节点存储在其 children 数组中
         * - 不同类型的节点会使用不同的对象属性进行描述
         * 
         * 什么是语义分析呢？
         * - 检查 v-else 指令是否存在相符的 v-if 指令
         * - 分析属性值是否是静态的，是否是常量等
         * - 插槽是否会引用上层作用域的变量
         * 
         * 将 Vue.js 模板编译为渲染函数的完整流程
         * - 通过封装 parse 函数来完成对模板的词法分析和语法分析，得到模板AST
         * - 可以封装 transform 函数来完成模板 AST 到 JavaScript AST 的转换工作
         * - 有了 JavaScript AST 后，我们就可以根据它生成渲染函数了，这一步可以通过封装 generate 函数来完成
         * 
         * 
        */
        
    </script>
    

</html>